<template>
	<!--人脸管理-->
	<div class="facemanage">
		<div class="tab-nav">
			<div class="leftnav" v-bind:class="{ check: oneitemcheck }" @click="itemclick(1)"><span v-bind:class="{ check: oneitemcheck }">过往人员</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: oneitemcheck }"></div>
			<div class="leftnav" @click="itemclick(2)" v-bind:class="{ check: twoitemchekc }"><span v-bind:class="{ check: twoitemchekc }">登记人员</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: twoitemchekc }"></div>
		</div>
		<div class="table-layout">
			<div class="search-layout">
				<div><span>姓名检索</span><Input v-model="value" placeholder="输入姓名" style="width: 10vw;margin-left: 1vw;" class="carplate"/></div>
				<div><span>开始时间</span><DatePicker @on-change="stime" type="datetime" placeholder="" format="yyyy-MM-dd HH:mm:ss" style="width: 10vw;margin-left: 1vw;" class="stime"></DatePicker></div>
				<div><span>结束时间</span><DatePicker @on-change="etime" type="datetime" placeholder=""  format="yyyy-MM-dd HH:mm:ss" style="width: 10vw;margin-left: 1vw;" class="etime"></DatePicker></div>
				<Button type="primary" icon="ios-search" class="finddata">开始查询</Button>
			</div>
			<Table disabled-hover :columns="columns1" :data="data1" class="infodatas"></Table>
			<Page :total="total" class="car-page" @on-change="onchange"/>
		</div>
	</div>
</template>

<script>
	import https from '@/assets/js/https.js'
	export default {
		name: "facemanage",
		data() {
			return {
				columns1:[
					{
						title: '日期',
						key: 'date'
					},
					{
						title: '时间',
						key: 'time'
					},
					{
						title: '用户姓名',
						key: 'name'
					},
					{
						title: '通行情况',
						key: 'state'
					},
					{
						title: '人员类型',
						key: 'type'
					},
					{
						title: '抓拍图像',
						key: 'imgurl',
						render:(h,params)=>{
							return h('img',{
								attrs:{
									src: params.row.imgurl, style: 'width: 100px;border-radius: 2px;'
								},
							})
						}
					}
				],
				data1:[],
				value:'',
				oneitemcheck:true,
				twoitemchekc:false,
				total:0,
				starttime:'',
				endtime:'',
				allhundata:[],//为了分页一次取100条数据,
				bigpageIndex:1
			}
		},
		mounted() {
			//初始化一些数据
			this.getData(this.bigpageIndex,true);
			var that=this;
			this.$mytimer.addCallBack(this,function (host) {
				if (that==host){
					that.getData(that.bigpageIndex,true);
				}
			})
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇1","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇2","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇3","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇4","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇5","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇6","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇7","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇8","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇9","type":"访客","imgurl":""});
			// this.data1.push({"date":"2019-07-15","time":"09:30","name":"秦始皇10","type":"访客","imgurl":""});
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			itemclick(index){
				if(index === 1){
					this.oneitemcheck = true;
					this.twoitemchekc = false;
				}else{
					this.oneitemcheck = false;
					this.twoitemchekc = true;
				}
			},
			onchange(index){
				console.log(index);
				//计算总页数
				let allpage = this.total/10;
				if(index === allpage ){
					this.bigpageIndex = this.bigpageIndex + 1;
					this.getData(this.bigpageIndex,false);
				}
				this.getDataOfTen(index);
			},
			stime(e){
				this.starttime = e;
			},
			etime(e){
				this.endtime = e;
			},
			getData(pageIndex,isadd){
				let params ={'pageNo': pageIndex, 'starttime': this.starttime,'endtime':this.endtime,'pageSize':'100'}
				let self = this;
				https.fetchGet('/web/VVID/FacesPage',params ).then((data) => {
					console.log(data)
					if(data.data.returnCode === 1){
						let alldata = JSON.parse(data.data.result.faceList);
						self.total = self.total + alldata.length;
						self.allhundata = self.allhundata.concat(alldata);
						if(isadd){
							for (let i = 0; i < 10; i++) {
								let date = alldata[i].FaceAppearTime.substr(0,4) + "-" + alldata[i].FaceAppearTime.substr(4,2) + "-" + alldata[i].FaceAppearTime.substr(6,2);
								let time = alldata[i].FaceAppearTime.substr(8,2) + ":" + alldata[i].FaceAppearTime.substr(10,2) + ":" + alldata[i].FaceAppearTime.substr(12,2)
								this.data1.push({"date":date,"time":time,"name":"","type":"","imgurl":alldata[i].SubImageList.SubImageInfoObject[0].StoragePath});
							}
						}

					}
				}).catch(err=>{
						console.log(err)
					}
				)
			},
			getDataOfTen(pageindex){
				this.data1.splice(0, this.data1.length)
				for (let i = (pageindex-1)*10; i < pageindex*10; i++) {
					let date = this.allhundata[i].FaceAppearTime.substr(0,4) + "-" + this.allhundata[i].FaceAppearTime.substr(4,2) + "-" + this.allhundata[i].FaceAppearTime.substr(6,2);
					let time = this.allhundata[i].FaceAppearTime.substr(8,2) + ":" + this.allhundata[i].FaceAppearTime.substr(10,2) + ":" + this.allhundata[i].FaceAppearTime.substr(12,2)
					this.data1.push({"date":date,"time":time,"name":"","type":"","imgurl":this.allhundata[i].SubImageList.SubImageInfoObject[0].StoragePath});
				}
			}
		},
		props: []
	}
</script>

<style scoped lang="less">
	@import '../assets/less/uiless.less';
	.facemanage{
		display: flex;
		flex-basis: 0;
		.compents_ui();
		.tab-nav{
			.compents_tabnav();
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-basis: 0;
			span{
				color:#ffffff33;
				display: inline-block;
				width: 20px;
				padding: 0 4px;
			}
			.leftnav{
				border:1px solid;
				border-color: @bordcolor transparent transparent @bordcolor;
				background-color: rgba(19,62,117,.3);
			}
			.sanjiao{
				.sanjiao_draw();
			}
			.check{
				background-color: rgba(19,62,117,.8);
				color:white;
			}
			.checksanjiao{
				border-color:rgba(19,62,117,.8) rgba(19,62,117,.8) transparent transparent;
			}
		}
		.table-layout{
			.compents_tablayout();
			.search-layout {
				display: flex;
				align-items: center;
				height: 7vh;
				span {
					.search_layout_span();
				}
			}
			.car-page{
				margin-top: 1vh;
			}
			.finddata{
				margin-left: 1vw;
			}
		}
	}
</style>
